<template>
  <div class="print-container">
    <div class="print-header">
      <div class="print-title">资产派发单</div>
      <button type="button" class="print-btn" @click="handlePrint">
        <span>打印</span>
      </button>
    </div>
    <div class="print-content">
      <table class="print-table" id="print-container">
        <tr>
          <td colspan="2">
            <table class="print-document-info">
              <tr>
                <th colspan="2">单据信息</th>
              </tr>
              <tr>
                <td>单据编号</td>
                <td>ZCCL2024041100001</td>
              </tr>
              <tr>
                <td>入库处理时间</td>
                <td>-</td>
              </tr>
              <tr>
                <td>领用部门</td>
                <td>总经办</td>
              </tr>
              <tr>
                <td>派发时间</td>
                <td>-</td>
              </tr>
              <tr>
                <td>备注</td>
                <td>-</td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td>
            <table class="print-asset-list">
              <tr>
                <th colspan="7">资产列表</th>
              </tr>
              <tr>
                <th>序号</th>
                <th>资产编码</th>
                <th>资产分类</th>
                <th>资产名称</th>
                <th>品牌</th>
                <th>型号</th>
                <th>所在位置</th>
              </tr>
              <tr>
                <td>1</td>
                <td>ZC-00020</td>
                <td>专用设备</td>
                <td>实验室专用油性笔</td>
                <td>-</td>
                <td>-</td>
                <td>CHANGKU</td>
              </tr>
            </table>
          </td>
      
        </tr>
      </table>
      <table class="print-table">
              <tr>
                <th colspan="6">审批列表</th>
              </tr>
              <tr>
                <th>节点名称</th>
                <th>姓名</th>
                <th>审批状态</th>
                <th>审批时间</th>
                <th>审批意见</th>
                <th>签名</th>
              </tr>
              <tr>
                <td>普通审批</td>
                <td>欧科</td>
                <td>待审核</td>
                <td>-</td>
                <td>审批意见内容</td>
                <td>签名</td>
              </tr>
            </table>
    </div>
  </div>
</template>

<script>

  import print from 'print-js'
export default {
  setup() {
    function open() {
  openFlag.value = true;
}
function handlePrint() {

  print({
    printable: 'print-container',
    type: 'html',
    scanStyles: true,
    targetStyles: ['*']
  });

}


    return {
      handlePrint,
      open
    };
  },
};
</script>

<style scoped>
.print-container {
  padding: 20px;
}

.print-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.print-title {
  font-size: 20px;
  font-weight: bold;
}
.print-asset-list{
  width: 100%;
  font-size: 14px;
}
.print-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: #007BFF;
  color: #ffffff;
  cursor: pointer;
  transition: background-color 0.3s;
}

.print-btn:hover {
  background-color: #0056b3;
}

.print-content {
  page-break-after: always;
}

.print-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.print-table th,
.print-table td {

  border: 1px solid #dddddd;
  padding: 8px;
  text-align: left;
}

.print-table th {
  background-color: #f2f2f2;
  font-weight: bold;
  color: #333333;
}

.print-table td {
  color: #666666;
}

.print-table th:nth-child(1), .print-table td:nth-child(1) {
  width: 20%; 
}

.print-table th:nth-child(2), .print-table td:nth-child(2) {
  width: 15%; 
}

.print-table th:nth-child(6), .print-table td:nth-child(6) {
  width: 10%;
}

</style>